<template>
  <div class="wrapper" ref="top">
    <router-link tag="div" :to="'/cityList/'" class="city">{{city}}<span class="iconfont icon-arrow-down"></span></router-link>
    <van-search v-model="search" placeholder="请输入区域/面积类型" @clear="is_show=false" @click="is_show=true" @input="onInput" />
    <div class="search" :style="'height:' + height + 'px;top:' + top + 'px;'" v-show="is_show">
      <router-link
        tag="div"
        :to="'/shopDetails/' + item.store_id"
        v-for="(item, index) in list"
        :key="index" :id="item.store_id"
        >{{item.store_title}}
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanySearch',
  data () {
    return {
      search: '',
      city: sessionStorage.getItem('Dcity'),
      height: 0,
      top: 0,
      is_show: false,
      list: []
    }
  },
  mounted () {
    if (this.city === '' || this.city === null) {
      this.city = '北京'
    }
    this.top = this.$refs.top.offsetTop + this.$refs.top.offsetHeight
    this.height = window.innerHeight - this.$refs.top.offsetTop
  },
  methods: {
    onInput (val) {
      this.$axios.post(process.env.API_HOST + '/api/store/store', {
        keywords: val,
        limit: 50,
        store_province: this.city
      }).then(this.postListSucc)
        .catch(error => console.log(error))
    },
    postListSucc (res) {
      if (res.data.code === 1) {
        this.list = res.data.data.lists
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
    width 100%
    height .7rem /* 65/50 */
    margin-top .4rem
    margin-bottom .4rem
    padding 0 .4rem /* 20/50 */
    display flex
    .city
        width 1.16rem /* 58/50 */
        line-height .7rem /* 65/50 */
        font-size .3rem /* 15/50 */
        span
            color #666
    .van-search
        width 100%
        padding 0px
        font-size .26rem /* 13/50 */
        .van-search__content
            border-radius 5px
        .van-cell
            height .7rem /* 35/50 */
    .search
      position fixed
      left 0px
      width 100%
      background #fff
      z-index 999
      overflow auto
      padding 0 .34rem /* 17/50 */
      div
        height 1.1rem /* 55/50 */
        line-height 1.1rem
        border-bottom 1px solid #999999
</style>
